<template>
	<div class="zh-class-management">
		<nav-header>
			<template slot="menuBefore">
				<li v-if="graduation === 'graduation'"><router-link to="/user/class/class-graduation" tag="a">已毕业班级</router-link></li>
                <li v-else><router-link to="/user/class/class-members" tag="a">班级列表</router-link></li>
                <li class="gap">&gt;</li>
			</template>
            <li v-text="classNxt" style="color: #999;"></li>
            <template slot="menuBefore">
                <div class="th-title-icon">
                    <el-button
                        @click="fieldsTips = true"
                        icon="el-icon-warning"
                        circle title="提示" size="mini" >
                    </el-button>
                </div>
            </template>
		</nav-header>
        <div class="zh-h5-tabs">
            <el-button type="primary">成员</el-button>
            <el-button type="default" @click="toLink('/user/class/class-post', true)">岗位</el-button>
            <el-button type="default" @click="toLink('/user/class/class-timetable')">课程表</el-button>
            <el-button type="default" @click="toLink('/user/class/class-data')">资料</el-button>
        </div>
		<div class="zh-table">
			<div class="zh-table-open clear">
                <div class="zh-open-left fl">
					<div class="open-width">
						<el-input v-model="listParam.keyword" placeholder="请输入成员姓名" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<!-- <el-button type="primary" @click="exportUser">导出Excel表</el-button>
					<el-button type="primary" @click="jumpImport()">批量导入</el-button> -->
					<el-button v-if="graduation !== 'graduation'" type="primary" @click="addUsers()">新增成员</el-button>
					<!-- <el-button type="danger" @click="deleteMuiltUser_confirm()">批量删除</el-button> -->
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt"	>
				<template>
				  	<el-table
				  	border
				    ref="multipleTable"
				    :data="listData"
				    tooltip-effect="dark"
				    max-height="600"
				    style="width: 100%"
				    @selection-change="tableSelectionChange">
				    	<!-- <el-table-column
					      type="selection"
					      width="50"
					      align="center"
                          :selectable="checkSelectable"
					      fixed>
					    </el-table-column> -->
					    <el-table-column
					      type="index"
                          :index="typeIndex"
					      label="序号"
					      align="center"
					      show-overflow-tooltip
					      width="50"
					      >
					    </el-table-column>
					    <el-table-column
					      label="姓名"
					      prop="name"
                          align="center"
					      show-overflow-tooltip
					      width="">
					    </el-table-column>
					    <!-- <el-table-column
					      label="帐号"
					      prop="number"
					      v-if="user_multistage === false"
					      show-overflow-tooltip
					      width="">
					    </el-table-column> -->
					    <el-table-column
					      label="身份"
					      prop="role_name"
                          align="center"
					      show-overflow-tooltip
					      width="">
					    </el-table-column>
                        <el-table-column
					      label="性别"
                          align="center"
					      show-overflow-tooltip
					      width=""
                        >
                            <template slot-scope="scope">
                                <span v-if="scope.row.sex === 1">男</span>
                                <span v-if="scope.row.sex === 2">女</span>
                            </template>
					    </el-table-column>
					    <!-- <el-table-column
					      label="邮箱"
					      prop="email"
					      v-if="user_multistage === false"
					      show-overflow-tooltip
					      width="">
					    </el-table-column> -->
					    <el-table-column
					      label="岗位名称"
					      prop="job_name"
                          align="center"
					      show-overflow-tooltip
					      width="">
					    </el-table-column>
                        <el-table-column
					      label="家长/子女"
                          align="center"
					      prop="relation_name"
					      show-overflow-tooltip
					      width="">
					    </el-table-column>
					    <el-table-column
					      align='center'
                          v-if="graduation !== 'graduation'"
					      label="操作">
						    <template slot-scope="scope">
						      	<el-button type="text" size="small" @click="jumpEdit(scope.row.id)"> 编辑</el-button>
						      	<el-button type="text" v-if="scope.row.role_id != 5 && graduation !== 'graduation'" class="delete-button" size="small" @click="deleteUser_confirm(scope.row)">移除</el-button>
					      	</template>		
						</el-table-column>
				  	</el-table>
				  	<div class="table-pagination" v-show="total_number > 10">
					  <el-pagination
						    @size-change="handleSizeChange"
						    @current-change="handleCurrentChange"
						    :current-page="listParam.page"
						    :page-sizes="[10, 20, 30, 40, 50, 100]"
						    :page-size="listParam.size"
						    layout="total, sizes, prev, pager, next, jumper"
						    :total="total_number">
						</el-pagination>
						<div class="pagination-button">
							<el-button 
								@click="getList"
								type="primary" icon="el-icon-refresh" 
								circle title="刷新数据" size="mini" >
							</el-button>
						</div>
					</div>
				</template>
			</div>
		</div>
		<!-- 单级版本才有的操作 start -->
        
		<!-- 添加/编辑用户 -->
		<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="addClassUser" class="classMembers" width="450px">
			<div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" status-icon label-position="left" label-width="90px">
					<el-form-item label="真实姓名 " prop="name">
						<el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex" required>
						<el-radio-group v-model="ruleForm.sex">
							<el-radio :label="1">男</el-radio>
							<el-radio :label="2">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="登录账号 " prop="number">
						<el-input v-model="ruleForm.number" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="用户角色" prop="role_id">
						<el-select v-model="ruleForm.role_id" filterable placeholder="请选择">
							<el-option label="老师" value="6"></el-option>
							<el-option label="学生" value="4"></el-option>
							<el-option label="家长" value="5"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
			    <el-button @click="addClassUser = false">取消</el-button>
			    <el-button type="primary" @click="submitClassUser('ruleForm')">确定</el-button>			    
			</div>
		</el-dialog>
		<!-- 单级版本才有的操作 end -->

		<!-- 多级版本才有的操作 start -->
        <el-dialog
            title="提示"
            :visible.sync="fieldsTips"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="30%">
            <template v-if="user_multistage === true">
                <div>若想 添加/删除 班级 请到组织架构中进行操作</div>
                <br>
                <ul>
                    <li>家长与学生进行关联，若想移除家长，则需先移除学生</li>
                    <li>移除学生也会一并移除家长</li>
                </ul>
            </template>
            <template v-else>
                <ul v-if="graduation !== 'graduation'">
                    <li style="list-style-type: disc;">
                        <span>移除的情况包括 休学、拉取错误，调班可以点击编辑</span>
                        <span>在绑定班级中进行调整</span>
                    </li>
                    <li style="list-style-type: disc;">家长与学生进行关联，若想移除家长，则需先移除学生</li>
                    <li style="list-style-type: disc;">移除学生也会一并移除家长</li>
                </ul>
                <ul v-else>
                    <li style="list-style-type: disc;">毕业班存放数据为六年级/初三/高三/大四 年级班级数据</li>
                    <li style="list-style-type: disc;">在成员列表中可对班级成员进行二次设置,可进行二次分配班级（如留级、降级、重新分配班级等异常情况）</li>
                </ul>
            </template>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
        
		<!-- 添加/编辑用户 -->
		<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="addClass" class="classMembers" width="700px">
            <div v-loading="loading1.status" :element-loading-text="loading1.txt">
                <div class="add-user-search">
                    <!-- <div>
                        <el-select v-model="role_id" filterable placeholder="请选择">
                            <el-option label="老师" value="6"></el-option>
                            <el-option label="学生" value="4"></el-option>
                        </el-select>
                    </!-- -->
                    <div>
                        <el-input v-model="keyword" placeholder="请输入用户姓名" @keyup.enter.native="getSearchList"></el-input>
                    </div>
                    <div>
                        <el-button type="primary" @click="getSearchList">搜索</el-button>
                        <el-button type="primary" @click="resetUser">重置</el-button>
                    </div>
                </div>
                <div style="height: 450px;">
                    <div class="Invite_l fl">
                        <!-- <el-scrollbar> -->
                            <el-collapse v-model="activeNames">
                                <el-collapse-item title="老师" name="1">
                                    <div style="height: 175px;overflow-y: auto;">
                                        <li class="selectName clear"  v-for="(item, index) in teacherList" :key="index">
                                            <em>{{index + 1}}</em>
                                            <span>{{item.name}}</span>
                                            <i class="el-icon-circle-plus" @click="addTeacher(item)"></i>
                                            <!-- <i class="el-icon-circle-plus" @click="nonNewMember.includes(item.id) ? '' : addTeacher(item)" :class="nonNewMember.includes(item.id) ? 'non-click-user' : ''"></i> -->
                                        </li>
                                        <li class="available" v-if="teacherList.length === 0">暂无相关成员</li>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="学生" name="2">
                                    <div style="height: 175px;overflow-y: auto;">
                                        <li class="selectName clear"  v-for="(item, index) in studentList" :key="index" >
                                            <em>{{index  + 1}}</em>
                                            <span>{{item.name}}</span>
                                            <i class="el-icon-circle-plus" @click="addStudent(item)"></i>
                                        </li>

                                        <li class="available" v-if="studentList.length === 0">暂无相关成员</li>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        <!-- </el-scrollbar> -->
                    </div>
                    <div class="Invite_r fl">
                        <div class="Invite_rh clear">
                            <span>账号</span>
                            <span>姓名</span>
                            <span>身份</span>
														<span>操作</span>
                        </div>
                        <div class="Invite_rc">
                            <el-scrollbar>
                                <ul>
                                    <template v-for="(item, index) in dataList.teacher">
                                        <li class="Invite_rls clear" :key="item.number">
                                            <span>{{item.number}}</span>
                                            <span>{{item.name}}</span>
                                            <span>老师</span>
                                            <!-- <span v-if="item.sex == 1">男</span>
                                            <span v-if="item.sex == 2">女</span> -->
                                            <span class="el-icon-remove fr" @click="deleteTeacher(index)"></span>
                                        </li>
                                    </template>
                                    <template v-for="(item, index1) in dataList.student">
                                        <li class="Invite_rls clear" :key="item.number">
                                            <span>{{item.number}}</span>
                                            <span>{{item.name}}</span>
                                            <span>学生</span>
                                            <!-- <span v-if="item.sex == 1">男</span>
                                            <span v-if="item.sex == 2">女</span> -->
                                            <span class="el-icon-remove fr" @click="deleteStudent(index1)"></span>
                                        </li>
                                    </template>
                                </ul>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer" style="padding: 40px 0; text-align:center">
                    <div class="new-title-icon">
                        <el-button
                            @click="isTips = true"
                            icon="el-icon-warning"
                            circle title="提示" size="mini" >
                        </el-button>
                    </div>
                    <el-button @click="addClass = false">取消</el-button>				
                    <el-button type="primary" v-if="dataList.teacher.length != 0" @click="Submission">确认</el-button>
                    <el-button type="primary" v-else @click="Submission2">确认</el-button>
                </div>
            </div>
		</el-dialog>
        <!-- 只有老师才有邀请权限 -->

		<!-- 邀请 -->
		<el-dialog
			title="邀请"
			:visible.sync="InvitationViews"
			width="460px"
			custom-class="alBox"
			:close-on-click-modal="false">
			<div class="signOut" v-loading="loading2.status" :element-loading-text="loading2.txt">
				<p class="i_gp">请给以下老师指定岗位:</p>
				<el-form  label-width="100px" class="demo-ruleForm">
					<div class="InvitationVal">
						<el-scrollbar>
							<el-form-item 
                                :label="item.name" 
                                v-for="(item, index) in teacherData" 
                                :key="index">
                                <el-select v-model="item.jobid" filterable placeholder="指定科目" @change="getJop(index)">
                                    <el-option
                                        v-for="(val, index2) in jobList"
                                        :label="val.name" :value="val.id" :key="index2">
                                    </el-option>
                                </el-select>
							</el-form-item>
						</el-scrollbar>
					</div>
					<el-form-item align="center" label-width='0'>
						<el-button @click="resetForm">取消</el-button>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!--  -->
		</el-dialog>
		<!-- 多级版本才有的操作 end -->

        <el-dialog
            title="提示"
            :visible.sync="isTips"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="30%">
            <ul v-if="graduation !== 'graduation'">
                <li style="list-style-type: disc;">不可以邀请已经绑定班级的学生，若要绑定，则需要解绑原来的班级关系</li>
                <li style="list-style-type: disc;">邀请老师无上述限制，因为一个老师可以同时教多个班级</li>
                <li style="list-style-type: disc;">无需邀请家长，家长与学生为绑定关系，邀请学生时自动邀请家长</li>
            </ul>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
                isTips: false,
                keyword: '', // 关键字搜索
                role_id: null,
                class_id: this.$route.params.id,
                teacherList: [],
                studentList: [],
                job_count: 0,
                jobList: [],
                activeNames: ['1', '2'],
                dataList: {
					teacher: [],
					student: []
                },
                InvitationViews: false, // 邀请弹框
				teacherData: [],
                fieldsTips: false,
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	loading1:{
					status:false,
					txt:'保存数据...',
				},
		    	loading2:{
					status:false,
					txt:'保存数据...',
				},
				selected:[],
				classNxt: null,
				total_number:0,
				listParam:{
					page: 1,
					size: 10,
                    data_type: 2,
                    style: 10,
                    keyword: '',
                    classid: this.$route.params.id,
                    role_id: [4, 5, 6]
	        	},
	        	listData:[],
		    	tableData3: [{
		    		name: '1'
		    	}],
		    	addClass: false,
		    	title: '',
		    	user_multistage: JSON.parse(sessionStorage.getItem('user_multistage')), // 判断当前是否为多级版本
				user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')), /*判断当前登录会员是否教育局 */
				addClassUser: false,
				ruleForm: {
		    			org_id:this.$route.params.id,
			    	 	name: '',
			    	 	sex: 1,
			    	 	number: '',
			    	 	role_id: null,
		    	},
		    	rules: {
		    		name: [
			            { required: true, validator: this.validateName, trigger: 'blur' },
		            ],
		            number: [
						{pattern: this.rules.account.reg,message: this.rules.account.msg, trigger: 'blur', required: true}
			            // { required: true, validator: this.validateUser, trigger: 'blur' }
		            ],
		            role_id: [
		            	{ required: true, validator: this.validateRole, trigger: 'change' }
		            ],
		    	},
		    	userParams: {
					status:[1,3],
					org_id:this.$route.params.id,
					page:1,
					size:10,
					n_n_e: null,
					data_type:2
				},
                rowLen: 0,
                messageObj: {},
                graduation: '',
                nonNewMember: []
		    }
		},
		created(){
			this.getList();
			this.getClassName();
	    },
	    watch: {
	    	addClass(){
	    		this.dataList = {
					teacher: [],
					student: []
				}
	    	},
	    	addClassUser(){
	    		if(this.addClassUser === false)
	    			this.$refs.ruleForm.resetFields()
	    	}
        },
        mounted() {
            if (!is_empty(this.$route.query.class) && this.$route.query.class === 'graduation') {
                this.graduation = 'graduation';
            } else {
                this.graduation = '';
            }
        },
		methods: {
			getClassName() {
				let success = ( data => {
                    this.classNxt = data.data[0].rename;
                });
                let params = {
                    id: this.$route.params.id
                }

                if (this.$route.query.class === 'graduation') {
                    params.status = 3;
                }

  				this.$ajax.get('api/org/org', {params: params, func:{success: success}})
			},
			addUsers(){
				// if (this.user_multistage === true) {
					this.addClass = true;
	                this.title = "新增成员";
	                this.resetUser();
	            // } else {
	            // 	this.addClassUser = true;
	            //     this.title = "新增成员";
	            // }
            },
			getList(){
                this.loading.status = true;
                
				let success = ( data => {
					this.loading.status =  false
					this.listData = data.data.data;
                    this.total_number = data.data.data_sum;
                    this.nonNewMember = this.listData.reduce((s, v) => (s.push(v.id), s), []);
				});
				let fail = ( data => {
					this.loading.status = false;
					this.$message.error(data.msg)
				})

				// if (this.user_multistage === true) {
  					this.$ajax.get('api/org/class_something', {params: this.listParam, func:{success: success}})
  				// } else {
				// 	this.userParams.n_n_e = this.listParam.keyword;
	  			// 	this.$ajax.get('api/user/user',{params: this.userParams, func:{success:success}})
	  			// }
		    },
		    // 序号
            typeIndex(index) {
            	// if (this.user_multistage === true) {
                	return index + (this.listParam.page - 1) * this.listParam.size + 1;
                // } else {
                // 	return index + (this.userParams.page - 1) * this.userParams.size + 1;
                // }
            },
            jumpImport(){
				this.$router.push('/user/class/class-user-import/'+this.$route.params.id);
            },
			jumpEdit(id){
				this.$router.push('/user/user/edit-platform-user/'+id + '#' + this.$route.params.id);
			},
			exportUser(){
                if( this.listData.length === 0 ){
                    this.$message.warning("导出的数据为空！")
                    return false;
                }

                this.export_excel('api/user/user_class_export_excel', this.listParam, '班级成员');
	    	},
	    	tableToExcel(){
	    		let jsonData = [];
			    //要导出的json数据
			    this.listData.forEach( item => {
			    	this.selected.forEach(data => {
			    		if (data.id == item.id) {
			    			jsonData.push({
			    				name: item.name,
			    				role_name: item.role_name,
			    				sex: item.sex == 1 ? '男' : '女',
			    				job_name: item.job_name,
			    				relation_name: item.relation_name
			    			})
			    		}
			    	})
			    })

			    //列标题
				var str = '<tr><td>姓名</td><td>身份</td><td>性别</td><td>岗位名称</td><td>家长/子女</td></tr>';

				//循环遍历，每行加入tr标签，每个单元格加td标签
				for(let i = 0 ; i < jsonData.length ; i++ ){
					str+='<tr>';
					for(let item in jsonData[i]){
						//增加\t为了不让表格显示科学计数法或者其他格式
						str+=`<td>${ jsonData[i][item] + '\t'}</td>`;     
					}
					str+='</tr>';
				}

				//Worksheet名
				var worksheet = 'Sheet1'
				var uri = 'data:application/vnd.ms-excel;base64,';

				//下载的表格模板数据
				var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
				xmlns="http://www.w3.org/TR/REC-html40">
				<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name>
				<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>
				</x:ExcelWorkbook></xml><![endif]--></head><body><table>${str}</table></body></html>`;

				let date = new Date();
			    let fileTime = '班级列表_' + `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}${date.getMilliseconds()}`;
				var download = document.createElement('a'); //页面上创建一个标签
				download.setAttribute('href', uri + this.base64(template));	//设置a 标签的href，
				download.setAttribute('download', fileTime);	//设置a 标签的download 属性，并限定下载文件名。
				download.click();	//出发a点击事件，下载文件
		 	},
		    //输出base64编码
		    base64 (s) { 
		    	return window.btoa(unescape(encodeURIComponent(s)));
		    },
			toLink(link, flag) {
                if (flag && this.graduation === 'graduation') {
                    this.$router.push('/user/class/class-post-setting/' + this.$route.params.id + '?class=graduation');
                } else {
                    this.$router.push(link + '/' + this.$route.params.id + (this.graduation ? '?class=' + this.graduation : ''));
                }
			},
			// 却有仅有家长身份时，不能被选中
            checkSelectable(row) {
                if (row.role_id == 5) {
                    return false;
                }

		        return true;
            },
            deleteUser_confirm(obj){
				let yes = ( data => {
					this.rowLen = 1;
					this.changeUser(obj.id, 0);
				})
                let cancel = ( data => {});
                let _name = this.classNxt ? this.classNxt : '';

                if (obj.relation_name != '-' && obj.role_id.indexOf('5') > -1 && obj.role_id.indexOf('6') > -1) {
                    this.e_confirm({
                        yes: yes, 
                        cancel: cancel, 
                        txt: `由于该用户有家长身份，移除时若其子女 ${obj.relation_name} 也在班级中，则会一并移除，确认移除？`
                    });

                    return false;
                }

                this.e_confirm({yes: yes, cancel: cancel, txt: '确定将 ' + obj.name + ' 从 ' + _name + ' 移除吗？'});
			},
			changeUser(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listData.length - this.rowLen === 0) {
						if (this.listParam.page > 1) {
							this.listParam.page-- ;
						} else {
							this.listParam.page = 1;
						}
					}

					this.getList();
                });
                let params = {
                    classid: this.class_id,
                    userid: id
                }

                // if (this.user_multistage === true) {
                    this.$ajax.delete('api/org/out_class', {params: params, func: {success: success}})
	            // } else {
	            //     this.$ajax.put('api/user/change_user',{id:id,status:status},{func:{success:success}})
	            // }
		    },
			handleSizeChange(val) {
		    	// if (this.user_multistage === true) {
		    		this.listParam.page = 1;
		    		this.listParam.size = val;
		    	// } else {
		    	// 	this.userParams.page = 1;
		    	// 	this.userParams.size = val;
		    	// }
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		    	// if (this.user_multistage === true) {
		    		this.listParam.page = val;
		    	// } else {
		    	// 	this.userParams.page = val;
		    	// }
		    	this.getList();
		    },
			tableSelectionChange(val) {
				this.selected = val;
			},
			deleteMuiltUser_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
                }
                
				let yes = ( data => {
					this.rowLen = this.selected.length;
					this.deleteMuiltUser();
				})
                let cancel = ( data => {})
                
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});
			},
	      	deleteMuiltUser(){
				let ids = [];
				for (let i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
                }
                
                if (this.user_multistage === true) {
					this.changeUsers(ids.join(','), 0);
				} else {
					this.changeUsers(ids, 0);
				}
			},
			changeUsers(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.listData.length - this.rowLen === 0) {
						if (this.listParam.page > 1) {
							this.listParam.page-- ;
						} else {
							this.listParam.page = 1;
						}
					}
					
					this.getList();
				});
				let fail = (res => {
                    longTimeMessage(this, res, 15000);
			        this.getList();
                }) 
                let params = {
                    // classid: 22,
                    classid: this.$route.params.id,
                    userid: id
                }
                if (this.user_multistage === true) {
	                this.$ajax.delete('api/org/out_class',{params: params, func: {success: success,fail:fail}})
	            } else {
	                this.$ajax.put('api/user/change_user',{id:id,status:status},{func:{success:success,fail:fail }})
	            }
			},
			
			// 单级
			submitClassUser(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.saveUser();
					} else {
						return false;
					}
				});
			},
			saveUser(){
				let success = ( data=>{
            		this.$message.success(data.msg);
            		this.addClassUser = false;
            		this.getList();
            	})
            	let fail = (res => {
                    longTimeMessage(this, res, 10000);
            	}) 
				this.$ajax.post('api/user/user', this.ruleForm, {func:{success:success,fail:fail}})	
			},
			//验证
			validateName(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入真实姓名'));
                } else if (!validateName(value)){
                	return callback(new Error('请不要输入空格符号'));
                } else {
                	callback()
                }
			},
			validateUser(rule, value, callback){
				if (value === '') {
                  	return callback(new Error('请输入登录账号'));
                } else if (!validateName(value)){
                	return callback(new Error('请不要输入空格符号'));
                } else {
                	callback()
                }
			},
			validateRole(rule, value, callback){
				if (!isEmpty(value)){
                	return callback(new Error('请选择选项'));
                } else {
                	callback()
                }
			},





			// 多级
            //邀请表单
			submitForm() {
				for (var i = 0; i < this.teacherData.length; i++) {
					if (this.teacherData[i].jobid === '') {
						this.$message.warning(`第 ${i+1} 个岗位不能为空`)
						return
					}
				}

                this.loading2.status = true;
                    
                let success = (res=>{
                    this.loading2.status = false;
                    this.$message.success(res.msg);
                    this.InvitationViews = false;
                    this.addClass = false;
                    this.reset();
                });
                let fail = (res => {
                    this.loading2.status = false;
                    this.$message.error(res.msg);
                })
                let  params = {
                    classid: this.class_id,
                    // classid: 22,
                    teacherlist: this.dataList.teacher,
                    studentlist: this.dataList.student,
                }
				this.$ajax.post('api/org/addusertoclass', params, {func: {success: success, fail: fail}});
			},
            resetForm() {
                this.InvitationViews = false;
                this.loading2.status = false;
				// for (var i = 0; i < this.teacherData.length; i++) {
				// 	this.teacherData[i].jobid = ''
				// }
			},
            getJop(index){
				for (let i = 0; i < this.teacherData.length; i++) {
					if( i === index ){
						continue;
                    }
                    
					if(this.teacherData[index].jobid === this.teacherData[i].jobid ) {
						this.teacherData[index].jobid = '';
                        this.$message.warning('岗位不能相同')
                        
                        return false;
					}
				}
			},
            /**
            * 搜索列表
            */
            searchFunc() {
                this.listParam.page = 1;
                this.getList();
            },
            reset() {
                this.listParam.keyword = '';
                this.getList();
            },
            //添加老师
			addTeacher(item){
				let val = item
				for (var i = 0; i < this.dataList.teacher.length; i++) {
					if ( this.dataList.teacher[i].id === item.id) {
						this.$message({
							message: '你已经添加了这个人了，不能再添加啦...',
							type: 'warning'
						});
						return
					}
				}
				// if (this.sumCount <= 0) {
				// 	this.sumCount = 0
				// }
				// this.$message(`老师职位还有 ${--this.sumCount} 个`);

				if(this.dataList.teacher.length >= this.job_count ){
					this.$message({
						message: '老师职位满了，没有更多的空缺职位了',
						type: 'warning'
					})
					return
				}
				this.dataList.teacher.push({
					id: item.id,
					number: item.number,
					name: item.name,
					sex: item.sex,
					jobid : '',
				})
            },
            deleteTeacher(index){
				this.dataList.teacher.splice(index,1)
			},
			//添加student
			addStudent(item){
				let val = item
				for (var i = 0; i < this.dataList.student.length; i++) {
					if ( this.dataList.student[i].id === item.id) {
						this.$message({
							message: '你已经添加了这个人了，不能再添加啦...',
							type: 'warning'
						});
						return
					}
				}

				this.dataList.student.push({
					id: item.id,
					number: item.number,
					name: item.name,
					sex: item.sex,
				})
			},
			deleteStudent(index){
				this.dataList.student.splice(index,1)
            },
            Submission(){
				if (this.dataList.teacher.length <= 0  && this.dataList.student.length <= 0) {
					this.$message({
						message: '列表信息不能为空',
						type: 'warning'
					});
					return 
				}
		
				if(this.dataList.teacher.length !== 0){
					this.InvitationViews = true
					this.teacherData = this.dataList.teacher;
				}
				
			},
			Submission2(){
				if (this.dataList.student.length <= 0) {
					this.$message({
						message: '列表信息不能为空',
						type: 'warning'
					});
					return 
				}
				if (this.dataList.student.length !== 0) {
                    this.loading1.status = true;
					let success = (res=>{
                        this.loading1.status = false;
						this.$message.success(res.msg)
						this.addClass = false;
                        this.reset();
					});
                    let fail = (res => {
                        this.loading1.status = false;
                        if (typeof res.msg === 'string') {
                            this.$message.error(res.msg)
                        } else {
                            let text = '';

                            res.msg.forEach(item => {
                                text += item + '<p style="padding: 5px 0;display: block;"></p>';
                            })

                            this.$message({
                                type: 'error',
                                message: text,
                                dangerouslyUseHTMLString: true
                            });
                        }
                    })
					let  params = {
                        classid: this.class_id,
						teacherlist: this.dataList.teacher,
						studentlist: this.dataList.student,
					}

					this.$ajax.post('api/org/addusertoclass', params, {func: {success: success, fail: fail}});
				}
				
			},
            resetUser() {   // 重置可以添加的用户
                this.keyword = '';
                this.role_id = null;
                this.getSearchList();
            },
            getSearchList() {   // 搜索可添加的用户
                let success = (res=>{
					let data = res.data;
					this.teacherList = data.teacher_list;
					this.studentList = data.student_list;
					this.job_count = data.job_count;
                    this.jobList = data.job_list;
				});
				this.$ajax({
					url: 'api/org/get_teacher_student',
					method: 'get',
					params: {
						classid: this.class_id,
						keyword: this.keyword
					},
					func: {
						success: success
					}
				})
            },	
        },
        destroyed(to, from, next) {
			this.$message.closeAll();
		},
  	}
</script>
<style lang="scss">
    $bg_5:#effaff; //hover
    $sc_3:#333333;
    $sc_5:#999999;
    $sc_6:#348efc; //Main color

    //wen ben yi cang ...
    .i_text{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

	.zh-class-management {
		.el-table__body-wrapper table tbody {
			td:nth-child(7) {
				padding: 0;
			}
        }

        .non-click-user {
            color: #ccc !important;
            cursor: not-allowed;
        }

        .new-title-icon {
            display: inline-block;
            position: absolute;
            left: 20px;
            bottom: 32px;

            button {
                min-width: 0;
            }
        }

        .add-user-search {
            padding-bottom: 30px;

            >div {
                display: inline-block;
            }

            >div:first-child {
                width: 186px;
            }

            // >div:nth-child(2) {
            //     width: 40%;
            // }

            >div:last-child {
                padding-left: 15px;
            }
        }
        
        .el-collapse-item__header {
            padding-left: 5px;
        }

        .signOut {
            padding-bottom: 50px;
        }

        .Invite_l {
            width: 185px;
            border-left: 1px solid #EBEEF5;
            border-right: 1px solid #EBEEF5;

            .el-collapse-item ul {
                overflow-y: auto;
                max-height: 185px;
            }

            .el-collapse>div:first-child .el-collapse-item__content {
                padding-bottom: 15px;
            }

            .el-collapse>div:last-child .el-collapse-item__content {
                padding-bottom: 5px;
            }

            .selectName{
                line-height: 36px;
                padding: 0 10px;
                cursor: pointer;
                text-align: center;
                text-align-last: justify;
                >span,
                >em,
                >i{
                    display: inline-block;
                    vertical-align: top;
                    text-align: left;
                    text-align-last: initial;
                }
                >i{
                    font-size: 18px;
                    color: $sc_6;
                    margin-top: 8px;
                }
                >span{
                    width: 100px;
                    height: 36px;
                    @extend .i_text;
                }
                &:hover{
                    background: $bg_5;
                }
            }

            .available{
                text-align: center;
                font-size: 12px;
                color: $sc_5;
                line-height: 40px;
            }
        }

        .Invite_r{
            margin-left: 15px;
            width: calc(100% - 215px);
            height: 100%;

            .Invite_rh{
                background: #F8F8F8;
                border-bottom: 1px solid #EFEFEF;
                >span{
                    display: block;
                    @extend .i_text;
                    line-height: 36px;
                    font-size: 12px;
                    color: #666666;
                    float: left;
                    text-align: center;

                    &:nth-of-type(1){
                        width: 140px;
                    }
                    &:nth-of-type(2){
                        width: 140px;
                    }
                    &:nth-of-type(3){
                        width: 83px;
                    }
                    &:nth-of-type(4){
                        width: 60px;
                        cursor: pointer;
                        // text-align: right;
                    }
                }
            }

            .Invite_rc{
                height: 384px;
                overflow: auto;
            }

            .Invite_rls{
                @extend .Invite_rh;
                background: none;
                >span{
                    line-height: 36px;
                    min-height: 10px;
                    color: $sc_3;
                }
                .el-icon-remove{
                    // margin-left: 10px;
										display: inline-block;
										width: 60px;
                    font-size: 18px;
                    color: $sc_6;
                    cursor: pointer;
                }
                &:hover{
                    background: $bg_5;
                }
            }
        }

        .th-title-icon {
            position: absolute;
            top: 0;
            right: 40px;
            
            i {
                color: #DAA017;
            }
        }

        .zh-h5-tabs {
            padding-bottom: 20px;
		}
	}
</style>